<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购买记录</title>
    <link rel="shortcut icon" href="../rent.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../public/css/invite_yl.css">
    <link rel="stylesheet" href="../public/libs/vant.css">
<!--    <link rel="stylesheet" href="../public/libs/setting.css">-->
</head>
<style>
    @media screen and (min-width: 500px) {
        body {
            box-sizing: border-box;
            margin: 0px auto;
            width: 100%;
            /* width: 375px;
        height: 702px;
        border: 1px solid grey; */
            /*position: relative;*/
            font-size: 20px;
        }

        * {
            font-size: 20px;

        }

        /* .van-image-preview{
        width: 375px;
        height: 702px;
        position: absolute;
    }
    .van-overlay{
        width: 375px;
        height: 702px;
        position: absolute;
    } */
    }

    /* header{
        background-color: #2db7f5;
        width: 100%;
        color: #fff;
    } */

    header {
        background-color: #2db7f5;
        width: 100%;
        color: #fff;

        /* background: #fff; */
        border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0 8px 8px;
        -moz-border-radius: 0 0 8px 8px;
        -ms-border-radius: 0 0 8px 8px;
        -o-border-radius: 0 0 8px 8px;
    }

    header .header-top {
        box-sizing: border-box;
        padding: 26px 5px;
        position: relative;
    }

    header .header-top span {
        position: absolute;
        top: 50%;
        left: 82%;
        font-size: 16px;
        font-weight: 600;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }

    header .header-top span:nth-child(2) {
        position: absolute;
        top: 50%;
        left: 50%;
        font-size: 16px;
        font-weight: 600;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
    }

    header .header-top a {
        position: absolute;
        left: 14px;
        top: 20px;
    }

    header .header-top a img {
        width: 11px;
    }

    .content {
        margin-top: 80px;
        padding-top: 20px;
    }

    .content>li {
        font-size: 16px;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        /* height: 300px; */
    }

    .content>li>input {
        margin-top: 20px;
        padding-left: 20px;
    }

    .content>li>input,
    button {
        margin-top: 20px;
        border-radius: 5px;
        font-size: 16px;
        width: 80%;
        height: 40px;


    }

    .content>li>p {
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: center;
        font-size: 20px;
        color: #2db7f5;
        font-weight: 700;
    }

    button {
        margin-top: 30px;
        /* background-color: #FF4F47; */
        border: none;
        box-shadow: 1px 1px 5px #ccc;
        font-size: 20px;
        border: 1px solid #2db7f5;
        background: #2db7f5;
        color: #ffffff;


    }

    .contenTtwo {
        width: 80%;
        text-align: center;
    }

    .contenTtwo li {
        color: #ff771a;
        font-weight: 700;
    }

    .contenTtwo li {
        margin-top: 30px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-around;
    }

    .h {
        width: 30%;
        word-wrap: break-word;word-break: break-all;overflow: hidden;
    }
    h1{
        text-align: center;
    }
    .p{
        font-size: 16px;
        /*color: red;*/
        text-align: left;
        width: 80%;
        padding-left: 10%;
        margin-top: 20px;
    }
</style>

<body>
    <div id="app">
        <header>
            <div class="header-top">
                <a onclick="javascript:window.history.back();">
                    <img src="../public/img/fanhui_left.png" alt="">
                </a>
                <span>我的购买记录</span>
                <span @click="login()">登录使用</span>
            </div>
        </header>
        <h1>温馨提示</h1>
        <p class="p">输入购买时的手机号或凭证来查询购买过的订单情况，拿到邀请码点击本页面的右上角“登录”进入我们系统进行下一步使用</p>
        <ul class="content">
            <li>
                <input type="text" placeholder="请输入购买时留下的凭证忘记或遗忘请联系客服协助
                " v-model="voucher">
                <button @click="get_yq_code">获取邀请码</button>
                <p>该凭证有已下邀请码</p>
                <ul class="contenTtwo">
                    <li><span>类型</span><span>邀请码</span></li>

                    <li v-for="(item,index) in yq_code"><span>{{item.AccountType}}</span><span
                            class="h">{{item.InvitationCode}}</span></li>

                </ul>
            </li>
        </ul>
    </div>
</body>
<script src="../public/libs/vue.min.js"></script>
<script src="../public/libs/jquery-3.4.1.min.js"></script>
<script src="../public/libs/app.js"></script>
<script src="../public/libs/vant.js"></script>
<script src="../public/libs/app.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            yq_code: "",
            voucher: "",
        },
        mounted: function () {
            this.init();
        },
        methods: {
            init: function () {
                if (app.GetQueryValue("pz")) {
                    this.voucher = app.GetQueryValue("pz");
                    console.log(this.voucher);
                    setTimeout(() => {
                        this.get_yq_code();
                    }, 100);

                }
            },
            login: function () {
                window.location.href = "login.html"
            },
            get_yq_code: function () {
                if (vm.voucher.length < 6) {
                    app.text_show( "请输入六位数以上的凭证")
                    return
                }
                $.ajax({
                    url: app.webUrl + "/Invitation/selVoucherInv",
                    data: { Voucher: vm.voucher },
                    type: "GET",
                    success: function (ret) {
                        // console.log(1);
                        // console.log(ret.data);
                        if (ret.data.length < 1) {
                            app.text_show("无数据");
                        }
                        if (ret.status == 1) {
                            // console.log(ret.data.invitationCode);
                            vm.yq_code = ret.data;
                        }
                    }
                });
            },
        },
    });
</script>

</html>